<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>光禽脚标机后台管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- layui日期插件样式 -->
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style_dark.css" rel="stylesheet" type="text/css" />

    <!-- datatables插件 -->
    <link href="plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
    <script src="assets/js/modernizr.min.js"></script>

</head>

<body>

    <!-- 界面代码开始 -->
    <div id="wrapper">

        <!-- ========== 左边侧边栏代码 ========== -->
        <div class="left side-menu">

            <div class="slimscroll-menu" id="remove-scroll">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo">
                        <span>
                            <img src="assets/images/logo.png" alt="" height="22">
                        </span>
                        <i>
                            <img src="assets/images/logo_sm.png" alt="" height="28">
                        </i>
                    </a>
                </div>

                <!-- 用户区域 -->
                <div class="user-box">
                    <!-- <div class="user-img">
							<img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-fluid">
						</div>
						<h5><a href="#">超级管理员</a> </h5>
						<p class="text-muted">超管</p> -->
                </div>

                <!--- 侧边菜单 -->
                <div id="sidebar-menu">

                    <ul class="metismenu" id="side-menu">
                        <!-- 主页 -->

                    </ul>
                    </li>
                    </ul>

                </div>
                <!-- Sidebar -->

                <div class="clearfix"></div>

            </div>
            <!-- Sidebar -left -->

        </div>
        <!-- Left Sidebar End -->

        <!-- ============================================================== -->
        <!-- 这里开始页面内容 -->
        <!-- ============================================================== -->

        <div class="content-page">

            <!-- 头部横条 -->
            <div class="topbar">

                <nav class="navbar-custom">

                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <!-- 通知 -->
                        <li class="dropdown notification-list">
                            <!-- <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="fi-bell noti-icon"></i>
                                <span class="badge badge-danger badge-pill noti-icon-badge">4</span>
                            </a> -->
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">

                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0"><span class="float-right"><a href=""
                                                class="text-dark"><small>全部已读</small></a> </span>通知</h5>
                                </div>

                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-warning"><i class="dripicons-warning"></i></div>
                                        <p class="notify-details">第一档口脚标机即将缺纸！<small class="text-muted">1 分钟前</small>
                                        </p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info"><i class=" dripicons-link-broken "></i></div>
                                        <p class="notify-details">第二档口脚标机离线<small class="text-muted">5 小时前</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-danger"><i class="dripicons-print"></i></div>
                                        <p class="notify-details">第三档口脚标机卡纸<small class="text-muted">3 天前</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-purple"><i class="dripicons-location"></i></div>
                                        <p class="notify-details">第四档口脚标机位置信息错误<small class="text-muted">4天前</small></p>
                                    </a>

                                </div>

                            </div>
                        </li>

                        <li class="dropdown notification-list tabUser">
                            <a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
                                aria-haspopup="false" aria-expanded="false">
                                <span class="ml-1">超级管理员<i class="mdi mdi-chevron-down"></i> </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                <div class="dropdown-item noti-title">
                                    <h6 class="text-overflow m-0">欢迎使用</h6>
                                </div>

                                <a href="javascript:void(0);" class="dropdown-item notify-item"
                                    onclick="window_change('我的信息','message.html')">
                                    <i class="fi-head"></i> <span>我的信息</span>
                                </a>

                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-lock"></i> <span>锁屏</span>
                                </a>

                                <a href="javascript:void(0);" class="dropdown-item notify-item logout">
                                    <i class="fi-power"></i> <span>退出</span>
                                </a>

                            </div>
                        </li>

                    </ul>

                    <ul class="list-inline menu-left mb-0">
                        <li class="float-left">
                            <button class="button-menu-mobile open-left disable-btn">
                                <i class="dripicons-menu"></i>
                            </button>
                        </li>
                        <li>
                            <div class="page-title-box">
                                <h2 class="">控制面板</h2>
                                <!-- <ol class="breadcrumb">
                                    <li class="breadcrumb-item active">欢迎使用光禽脚标机后台管理系统</li>
                                </ol> -->
                            </div>
                        </li>

                    </ul>

                </nav>

            </div>
            <!-- 头顶标签结束 -->

            <!-- Start Page content -->
            <div class="content">
                <div class="container-fluid">
                    <!-- 四联下拉框 -->
                    <div class="row mb-3">
                        <div class="col-sm-3 themed-grid-col">
                            <label for="province">请选择省份</label>
                            <input class="form-control" id="province" readonly="readonly" />
                        </div>
                        <div class="col-sm-3 themed-grid-col">
                            <label for="town">请选择市</label>
                            <select class="form-control" id="town">
                            </select>
                        </div>
                        <div class="col-sm-3 themed-grid-col">
                            <label for="district">请选择区</label>
                            <select class="form-control" id="district">
                            </select>
                        </div>
                        <div class="col-sm-3 themed-grid-col">
                            <label for="market">请选择市场</label>
                            <select class="form-control" id="market">

                            </select>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="countDiv" style="display:flex;flex-wrap: nowrap;justify-content: space-around;">
                            <!-- flex-direction:row;flex-wrap:nowrap;justify-content:center;  -->
                        </div>


                        <div class="row">

                        </div>
                        <div class="row">
                            <div class="col-xl-6 " style="min-height: 0;">
                                <div class="card-box">
                                    <div class="card-body">

                                        <h3 class="header-title">设备状态图</h3>
                                        <div id="combine-chart">
                                            <div id="pie" class="flot-chart mt-5 index-cardbox">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-xl-6" style="min-height: 0;">
                                <div class="card-box">
                                    <div class="card-body">
                                        <h4 class="m-t-0 header-title">设备状态表</h4>
                                        <table id="tableEquipment" class="table table-bordered dt-responsive nowrap"
                                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th width="50px">档口主名称</th>
                                                    <th>条形码剩余量</th>
                                                    <th>设备状态</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tableEquipmentBody">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-6 " style="min-height: 0;">
                                <div class="card-box">
                                    <div class="card-body">
                                        <h3 class="header-title">禽类销售状态图</h3>
                                        <div class="selectPoultryDiv">
                                            <label class="col-md-3">请选择禽类:</label>
                                            <select class="form-control col-md-6" id="selectPoultry">
                                            </select>
                                        </div>
                                    </div>

                                    <div id="combine-chart">
                                        <div id="bar" class="flot-chart mt-5 index-cardbox">
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-xl-6" style="min-height: 0;">
                                <div class="card-box">
                                    <div class="card-body">
                                        <h4 class="header-title">禽类销售状态列表</h4>
                                        <table id="tableSell" class="table table-bordered dt-responsive nowrap"
                                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th>禽类</th>
                                                    <th>禽类销量</th>
                                                    <th>销售去向地址</th>
                                                    <th>所属市场</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tableSellBody">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                    </div>
                    <!-- container -->

                </div>
                <!-- content -->

                <footer class="footer">

                </footer>

            </div>

            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->

        </div>
        <!-- END wrapper -->

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/navigate.js"></script>
        <script>
            var roleName = getCookie("roleName")
            createNavigate(roleName)
        </script>
        <script src="assets/js/metisMenu.min.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>

        <!-- KNOB JS -->
        [if IE]>
        <script type="text/javascript" src="plugins/jquery-knob/excanvas.js"></script>
        <![endif]
        <script src="plugins/jquery-knob/jquery.knob.js"></script>
        <!-- layer插件 -->
        <script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>

        <!-- Dashboard Init -->
        <script src="plugins/echarts/echarts.min.js"></script>
        <script src="plugins/echarts/macarons.js"></script>


        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>
        <!-- datatables插件 -->
        <script src="plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="plugins/datatables/dataTables.bootstrap4.min.js"></script>
        <script src="plugins/datatables/dataTables.responsive.min.js"></script>
        <script src="plugins/datatables/responsive.bootstrap4.min.js"></script>
        <script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                getProvince('广东省','中山市')
            })

        </script>

</body>

</html>